<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>绘制椭圆</title>
  </head>
  <body>
    <script>
      (() => {
        const canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 400;
        document.body.append(canvas);

        const ctx = canvas.getContext("2d");
        ctx.lineWidth = 4;
        ctx.strokeStyle = "#00f";

        ctx.beginPath();
        ctx.ellipse(100, 100, 100, 50, 0, 0, Math.PI * 2);
        ctx.stroke();

        ctx.beginPath();
        ctx.ellipse(300, 100, 100, 50, 0, 0, Math.PI / 2, true);
        ctx.stroke();

        ctx.beginPath();
        ctx.ellipse(100, 300, 100, 50, Math.PI / 2, 0, Math.PI * 2);
        ctx.stroke();
      })();
    </script>
  </body>
</html>
